<template>
  <view class="coupon_index">
    <view class="top">
      <view class="fixed">
        <text :class="[tagType == 0 ? 'selected' : '']" @click="changeTag(0)"
          >可使用{{
            canUseLength !== undefined ? "(" + canUseLength + ")" : ""
          }}</text
        >
        <text :class="[tagType == 1 ? 'selected' : '']" @click="changeTag(1)"
          >已使用{{
            usedLength !== undefined ? "(" + usedLength + ")" : ""
          }}</text
        >
        <text :class="[tagType == 2 ? 'selected' : '']" @click="changeTag(2)"
          >已过期{{
            expiredLength !== undefined ? "(" + expiredLength + ")" : ""
          }}</text
        >
      </view>
    </view>
    <view class="center">
      <view
        class="coupon"
        :class="[
          ele.couponTemplateInfo.couponType == 1 ? 'direct' : '',
          ele.couponTemplateInfo.couponType == 2 ? 'rate' : '',
          ele.couponTemplateInfo.couponType == 3 ? 'exchange' : '',
          tagType == 2 ? 'expired' : '',
        ]"
        v-for="ele in couponList"
        :key="ele.couponUserId"
      >
        <view class="left">
          <view class="amount" v-if="ele.couponTemplateInfo.couponType == 1">
            ￥
            <text class="value">{{ ele.couponTemplateInfo.couponAmt }}</text>
          </view>
          <view class="amount" v-if="ele.couponTemplateInfo.couponType == 2">
            <text class="value">{{ ele.couponTemplateInfo.couponAmt }}</text>
            %
          </view>
          <view class="condition">
            {{
              ele.couponIssueInfo.couponThresholdAmt == 0
                ? "无门槛"
                : "满" + ele.couponIssueInfo.couponThresholdAmt + "元可用"
            }}
          </view>
          <view class="exchangeName">
            {{ ele.couponTemplateInfo.couponName }}
          </view>
        </view>
        <view class="right">
          <view class="title">
            <view class="type"
              >{{ ele.couponTemplateInfo.couponType == 1 ? "立减劵" : ""
              }}{{ ele.couponTemplateInfo.couponType == 2 ? "折扣劵" : ""
              }}{{ ele.couponTemplateInfo.couponType == 3 ? "兑换劵" : "" }}
            </view>
            <view class="state">
              {{ tagType === 2 ? "已失效" : "" }}
              {{ tagType === 1 ? "已使用" : "" }}
              {{ tagType === 0 && ele.canUse == "1" ? "可使用" : "" }}
              {{ tagType === 0 && !ele.canUse == "1" ? "暂时不可用" : "" }}
            </view>
          </view>
          <view
            class="content"
            :class="[ele.couponTemplateInfo.couponType != 3 ? 'notip' : '']"
          >
            <view class="items">
              <view
                class="item valid"
                v-if="ele.couponTemplateInfo.couponType != 3"
              >
                油品：<text>{{ ele.oils }}</text>
              </view>
              <view class="item scope">
                适用：<text
                  >{{
                    ele.couponTemplateInfo.couponType == 1 ||
                    ele.couponTemplateInfo.couponType == 2
                      ? ele.couponStaNames
                      : ""
                  }}{{
                    ele.couponTemplateInfo.couponType == 3
                      ? ele.verStaNames
                      : ""
                  }}</text
                >
              </view>
              <view class="item valid">
                截止：<text>{{ ele.couponEffectiveTime }}</text>
              </view>
              <view class="item from">
                来源：<text>{{ ele.couponIssueInfo.issueName }}</text>
              </view>
            </view>
          </view>

          <view class="tip" v-if="ele.couponTemplateInfo.couponType == 3">
            {{ ele.couponTemplateInfo.couponDetails }}
          </view>
        </view>
      </view>
    </view>
    <view
      v-if="couponList.length == 0"
      style="
        text-align: center;
        font-weight: bold;
        margin-top: 200rpx;
        margin-bottom: 300rpx;
      "
    >
      暂未符合条件的优惠劵
    </view>
    <footer class="bottom-pagination" v-if="total > queryForm.pageSize">
      <uni-pagination :total="total" :current="queryForm.pageNum" :pageSize="queryForm.pageSize"
      @change="getCouponList" />
    </footer>
  </view>
</template>

<script>

export default {
  head() {
    return {
      title: "我的优惠券",
    };
  },
  data() {
    return {
      couponList: [],
      currentPage: 1,
      total: 0,
      queryForm: {
        pageNum: 1, //第几页
        pageSize: 8, // 容量
        enterpriseId: 7,
        couponIsUsed: 0,
        mobilePhone: "",
      },
      canUseLength: undefined,
      usedLength: undefined,
      expiredLength: undefined,
      tagType: 0
    };
  },
  filters: {},
  components: {},
  created() {
    this.getCouponList();
  },
  methods: {
    changeTag(type) {
      switch (type) {
        case 0:
          this.queryForm.pageNum = 1;
          this.queryForm.couponIsUsed = 0;
          this.tagType = 0;
          this.getCouponList();
          break;
        case 1:
          this.queryForm.pageNum = 1;
          this.queryForm.couponIsUsed = 1;
          this.tagType = 1;
          this.getCouponList();
          break;
        case 2:
          this.queryForm.pageNum = 1;
          this.queryForm.couponIsUsed = 2;
          this.tagType = 2;
          this.getCouponList();
          break;
        default:
          break;
      }
    },
    async getCouponList(e) {
      this.queryForm.enterpriseId = this.enterpriseId;
      this.queryForm.mobilePhone = this.phoneNumber;
      if (e) {
        this.queryForm.pageNum = e.current;
      }
      try {
        const res = await this.$Request({
          url: "/selectUserCoupons",
          method: "GET",
          data: {
            ...this.queryForm,
          }
        });
        if (res.retCode === 0) {

          this.couponList = res.data.list;
          this.total = res.data.total;

          switch (this.tagType) {
            case 0:
              this.canUseLength = res.data.total;
              break;
            case 1:
              this.usedLength = res.data.total;
              break;
            case 2:
              this.expiredLength = res.data.total;
            default:
              break;
          }
        } else {
        throw new Error(res.message);
        }
      } catch (error) {
				uni.showToast({
					title: '拉取优惠券失败了',
					icon: 'fail',
				});
      }
    },
  },
};
</script>

<style lang="scss">
.coupon_index {
  width: 750rpx;
  background: #ffffff;
  padding: 0 30rpx 0 30rpx;
  box-sizing: border-box;
  min-height: 100vh;

  > .top {
    width: 690rpx;
    height: 100rpx;

    .fixed {
      position: fixed;
      top: 0;
      left: 0;
      width: 750rpx;
      height: 100rpx;
      padding: 0 30rpx 0 30rpx;
      box-sizing: border-box;
      background: #ffffff;
      display: flex;
      justify-content: space-around;
      align-items: center;
      text {
        height: 45rpx;
        font-size: 32rpx;
        font-weight: 400;
        color: #aaaaaa;
        line-height: 45rpx;
        letter-spacing: 1rpx;
      }
      text.selected {
        color: #111111;
      }
    }
  }
  > .center {
    .coupon {
      display: flex;
      justify-content: space-between;
      height: 250rpx;
      margin-bottom: 30rpx;
      box-shadow: 0rpx 0rpx 10rpx 4rpx rgba(233, 223, 223, 0.5);
      > .left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        width: 220rpx;
        height: 250rpx;
        text-align: center;

        .amount {
          display: block;
          font-size: 40rpx;
          font-weight: 500;
          color: #ffffff;
          line-height: 56rpx;
          text-align: center;
          margin-top: 0rpx;
          .value {
            font-size: 60rpx;
          }
        }
        .condition {
          font-size: 24rpx;
          font-weight: 400;
          color: #ffffff;
          line-height: 33rpx;
          text-align: center;
          margin-top: 25rpx;
        }
        .exchangeName {
          display: none;
          font-size: 35rpx;
          font-weight: 500;
          color: #ffffff;
          line-height: 56rpx;
        }
      }
      > .right {
        width: 456rpx;
        height: 245rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 8rpx 0 5rpx 0;
        .title {
          height: 30rpx;
          font-size: 24rpx;
          font-weight: 600;
          display: flex;
          line-height: 33rpx;
          .type {
            width: 113rpx;
            height: 30rpx;
            line-height: 30rpx;
            display: inline-block;
            background: #f8c;
            border-radius: 19rpx;
            font-size: 24rpx;
            font-weight: 600;
            color: #ffffff;
            text-align: center;
          }
          .state {
            margin-left: 20rpx;
            color: #7f7f7f;

            height: 33rpx;
            font-size: 24rpx;
            font-weight: 600;
            line-height: 33rpx;
          }
        }
        .content {
          display: flex;
          justify-content: space-between;
          margin: 5rpx 0 5rpx 0;
          height: 140rpx;

          .items {
            width: 430rpx;
            height: 100%;
            display: flex;
            justify-content: space-around;
            flex-direction: column;
            .item {
              color: #272626;
              font-size: 21rpx;
              line-height: 21rpx;
              > text {
                width: 330rpx;
                display: inline-block;
                color: #272626;
                font-size: 22rpx;
                font-weight: bold;
                white-space: nowrap; /* 文本不换行 */
              }
            }
            .from {
              display: block;
            }
          }
          > .btn {
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-right: 10rpx;
            > button {
              height: 60rpx;
              background: linear-gradient(143deg, #fad965 0%, #f3b235 100%);
              border-radius: 20rpx;
              border: none;
              outline: none;
              color: #ffffff;
              line-height: 33rpx;
              font-size: 30rpx;
              font-weight: 400;
              overflow: hidden; /* 超出部分隐藏 */
              white-space: nowrap; /* 文本不换行 */
              display: none;
            }
          }
        }
        .notip {
          height: 180rpx;
        }
        .tip {
          margin-right: 20rpx;
          border-top: 2rpx dashed #d8d8d8;
          height: 49rpx;
          font-size: 22rpx;
          font-weight: 400;
          color: #7f7f7f;
          line-height: 23rpx;
          padding-top: 12rpx;
          box-sizing: border-box;
          white-space: nowrap;
          /*  text-overflow: ellipsis;*/
        }
      }
    }
    .direct {
      > .left {
        background: url("../static/coupon/quan1.2x.png") no-repeat;
        background-size: 100% 100%;
      }
      > .right {
        > .title > .type {
          background: #f8ce57;
        }
        > .content > .btn button {
          background: linear-gradient(143deg, #fad965 0%, #f3b235 100%);
        }
      }
    }
    .rate {
      > .left {
        background: url("../static/coupon/quan2.2x.png") no-repeat;
        background-size: 100% 100%;
      }
      > .right {
        > .title > .type {
          background: #eb8573;
        }
        > .content > .btn button {
          background: linear-gradient(143deg, #f4a796 0%, #e67462 100%);
        }
      }
    }
    .exchange {
      > .left {
        background: url("../static/coupon/quan3.2x.png") no-repeat;
        background-size: 100% 100%;
        > .amount,
        > .condition {
          display: none;
        }
        > .exchangeName {
          display: inline-block;
          width: 150rpx;
          margin: 0 auto;
        }
      }
      > .right {
        > .title > .type {
          background: #19c79b;
        }
        > .content {
          > .items {
            width: 330rpx;
            .item text {
              width: 230rpx;
            }
          }
          > .btn button {
            background: linear-gradient(143deg, #21d9b4 0%, #0fb582 100%);
            display: block;
          }
        }
      }
    }
    .expired {
      > .left {
        background: url("../static/coupon/quan4.2x.png") no-repeat;
        background-size: 100% 100%;
      }
      > .right {
        > .title > .type {
          background: #bfbfbf;
        }
        > .content > .btn button {
          display: none;
        }
      }
    }
  }
  > .bottom {
    margin-top: 80rpx;
    margin-bottom: 30rpx;
    text-align: center;
    font-size: 22rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.25);
    line-height: 32rpx;
    letter-spacing: 1px;
  }
  .bottom-pagination {
    width: 100%;
  }
}
</style>
